<template>
	<view class="pages" style="display: flex; flex-direction: column;min-height:100vh;background: #F5F6F8;">
		<h-nav-bar title="明细" :fixed="true" backgroundColor="#FFF" @clickLeft="navigateBack"></h-nav-bar>
		<view class="head">
			<view class="head_t">金额汇总</view>
			<view class="head_b flex">
				<view class="head_b_n head_b_na">
					<view class="head_b_n_t">￥{{moneyDetail.total_income_amount}}</view>
					<view class="head_b_n_b">总收入</view>
				</view>
				<view class="head_b_n head_b_nb">
					<view class="head_b_n_t">￥{{moneyDetail.total_withdrawal_amount}}</view>
					<view class="head_b_n_b">总提取</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="sec_t flex">
				<view class="sec_t_l" @click="timeShow=true">{{dateTime}}
					<image class="sec_t_l_img" src="@/static/index/xia.png"></image>
				</view>
				<view class="sec_t_r flex">
					<view class="sec_t_r_l">收：￥{{monthMoneyDetail.total_income_amount}}</view>
					<view class="sec_t_r_l">提：￥{{monthMoneyDetail.total_withdrawal_amount}}</view>
				</view>
			</view>
			<view class="sec_b" v-show="list.length>0">
				<view class="sec_b_l flex" v-for="(item,index) in list" :key="index">
					<view class="sec_b_l_l flex">
						<image class="sec_b_l_l_img" :src="item.image"></image>
						<view class="sec_b_l_l_b">
							<view class="sec_b_l_l_b_l">
								<view>{{item.title}}</view>
								<view v-show="item.relevant_status==1&&item.type==2" class="sec_b_l_l_b_l_r"><text></text>提现中</view>
							</view>
							<view class="sec_b_l_l_b_b">{{item.relevant_time==newTime?'今天':item.show_relevant_time}}</view>
						</view>
					</view>
					<view class="sec_b_l_r" :style="{color:(item.type==1?'#202020':'#F1655D')}">{{item.type==1?'+':'-'}}￥{{item.relevant_price}}</view>
				</view>
			</view>
			<view class="sec_none" v-show="list.length==0" style="flex: 1;">
				<view>
					<image class="sec_none_img" src="@/static/imgs/default_suggest.png"></image>
					<view class="sec_none_text">暂无数据</view>
				</view>
			</view>
		</view>
	</view>
	<up-popup :show="timeShow" @close="timeShow=false" mode="bottom" :round="20">
		<view class="time_box">
			<picker-view :indicator-style="indicatorStyle" :value="timeValue" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
			</picker-view>
			<view class="time_box_btn" @click="bindTime">确定</view>
		</view>
	</up-popup>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad, onShow, onReachBottom, onPageScroll, onReady } from '@dcloudio/uni-app'
	import { showToast, navigateTo, navigateBack, formatDate } from '@/utils'
	import { totalAmountSummary,detailedList } from '@/api/my'
	const dateTime = ref(formatDate(new Date(), 'YYYY年MM月'))
	const newTime = ref(formatDate(new Date(), 'YYYY年MM月DD日'))
	const timeShow = ref(false)

	const years = ref([])
	const months = ref([])
	const indicatorStyle = ref("height: 50px;")
	const timeValue = ref([0, 0])
	const pickTime = ref(formatDate(new Date(), 'YYYY年MM月'))
	const yearTime=ref(formatDate(new Date(), 'YYYY'))
	const monthTime=ref(formatDate(new Date(), 'MM'))
	const moneyDetail=ref({})
	const monthMoneyDetail=ref({})
	onLoad(async() => {
		const date = new Date()
		const year = date.getFullYear()
		const month = date.getMonth() + 1
		let arr1 = []
		let arr2 = []
		for(let i = 1990; i <= date.getFullYear(); i++) {
			arr1.push(i)
		}
		for(let i = 1; i <= 12; i++) {
			arr2.push(i)
		}
		years.value = arr1
		months.value = arr2
		for(var i in arr1) {
			if(year == arr1[i]) {
				timeValue.value[0] = i
			}
		}
		for(var i in arr2) {
			if(month == arr2[i]) {
				timeValue.value[1] = i
			}
		}
		getList()
		const res=await totalAmountSummary()
		moneyDetail.value=res.data
	})
	const list = ref([])
	const timearr=ref([])
	function bindChange(e) {
		const val = e.detail.value
		timearr.value=val
		let year = years.value[val[0]]
		let month = months.value[val[1]]
		const date = new Date()
		const yy = date.getFullYear()
		const mm = date.getMonth() + 1
		if(yy == year) {
			let arr2 = []
			for(let i = 1; i <= mm; i++) {
				arr2.push(i)
			}
			months.value = arr2
		} else {
			let arr2 = []
			for(let i = 1; i <= 12; i++) {
				arr2.push(i)
			}
			months.value = arr2
		}
		if(month<10){
			month='0'+month
		}
		yearTime.value=year
		monthTime.value=month
		pickTime.value = year + '年' + month + '月'
	}

	function bindTime() {
		timeValue.value=timearr.value
		dateTime.value = pickTime.value
		timeShow.value = false
		getList()
	}
	async function getList() {
		const res=await detailedList({
			year:yearTime.value,
			month:monthTime.value
		})
		monthMoneyDetail.value=res.data
		list.value=res.data.list.data
	}
</script>
<style scoped>
	page {
		background: #F5F6F8;
	}
</style>
<style scoped lang="scss">
	/*两端分开*/

	.flex {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	::v-deep .uni-picker-view-indicator {
	  background-color: #F5F6F8;
	  z-index: 0;
	}
	.time_box {
		.picker-view {
			width: 750rpx;
			height: 400rpx;
			margin-top: 35rpx;
		}
		.item {
			line-height: 100rpx;
			text-align: center;
		}
		.time_box_btn {
			width: 702rpx;
			height: 88rpx;
			background: #00C1B9;
			border-radius: 48rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			font-style: normal;
			margin: 12rpx auto;
		}
	}

	.head {
		width: 702rpx;
		background: #FFFFFF;
		margin: 24rpx auto 0;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		.head_t {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #202020;
			line-height: 37rpx;
			text-align: center;
			font-style: normal;
		}
		.head_b {
			padding-top: 30rpx;
			.head_b_n {
				width: 321rpx;
				height: 140rpx;
				padding-left: 130rpx;
				padding-top: 30rpx;
				box-sizing: border-box;
				.head_b_n_t {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 45rpx;
				}
				.head_b_n_b {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 33rpx;
				}
			}
			.head_b_na {
				background: url('@/static/index/bjb.png') no-repeat;
				background-size: cover;
			}
			.head_b_nb {
				background: url('@/static/index/bja.png') no-repeat;
				background-size: cover;
			}
		}
	}

	.section {
		width: 702rpx;
		margin: 0 auto 20rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		.sec_t {
			padding: 30rpx 0;
			.sec_t_l {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #202020;
				line-height: 42rpx;
				.sec_t_l_img {
					width: 30rpx;
					height: 30rpx;
					position: relative;
					top: 6rpx;
				}
			}
			.sec_t_r {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #5C5C5C;
				line-height: 42rpx;
				text-align: right;
				font-style: normal;
				.sec_t_r_l {
					margin-left: 30rpx;
				}
			}
		}
		.sec_none{
			width: 702rpx;
			border-radius: 20rpx;
			background: #FFF;
			display: flex;
			flex-direction: row;
			/* 子元素横向排列 */
			justify-content: center;
			/* 相对父元素水平居中 */
			align-items: center;
			.sec_none_img{
				width: 240rpx;
				height: 200rpx;
			}
			.sec_none_text{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #AAAAAA;
				line-height: 30rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				padding-top: 20rpx;
			}
		}
		.sec_b {
			width: 702rpx;
			border-radius: 20rpx;
			background: #FFF;
			.sec_b_l {
				border-bottom: 1rpx solid #F1F1F1;
				width: 662rpx;
				margin: 0 auto;
				padding: 28rpx 0;
				.sec_b_l_l {
					.sec_b_l_l_img {
						width: 90rpx;
						height: 90rpx;
					}
					.sec_b_l_l_b {
						margin-left: 20rpx;
						.sec_b_l_l_b_l {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #202020;
							line-height: 50rpx;
							overflow: hidden;
							view {
								float: left;
							}
							.sec_b_l_l_b_l_r {
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 26rpx;
								color: #F5A520;
								line-height: 50rpx;
								text {
									float: left;
									width: 14rpx;
									height: 14rpx;
									background: #F5A520;
									border-radius: 50%;
									margin: 18rpx 5rpx 18rpx 20rpx;
								}
							}
						}
						.sec_b_l_l_b_b {
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #AAAAAA;
							line-height: 37rpx;
						}
					}
				}
				.sec_b_l_r {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #202020;
					line-height: 90rpx;
					text-align: right;
					font-style: normal;
				}
			}
		}
	}
</style>
